<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鸡兔同笼问题</title>
    <style>
        .container {
            width: 60%;
            margin: 0 auto;
            background-color: aqua;
            min-height: 220px;
        }
        h2 {
            text-align: center;
            padding-top: 10px;
        }
        p {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        input[type="number"] {
            box-sizing: border-box;
            width: 60px;
        }
        p#result {
            margin: 20px auto;
            height: 40px;
            width: 75%;
            padding: 20px;
            border: 1px dotted goldenrod;
            background-color: rgb(221, 220, 220);
            font-weight: bold;
            text-align: center;
        }
        .solution {
            color: green;
            font-weight: bold;
        }
        .no-solution {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>循环解决鸡兔同笼问题</h2>
    <p>鸡兔同笼，鸡兔一共 <input type="number" id="heads" value="35"> 只，兔子腿一共 <input type="number" id="legs" value="94"> 条，请问分别有多少只鸡和兔？</p>
    <p><button onclick="calculate()">计算</button></p>
    <p id="result"></p>
</div>

<script>
    function calculate() {
        const heads = parseInt(document.getElementById('heads').value);
        const legs = parseInt(document.getElementById('legs').value);
        let found = false;

        for (let chickens = 0; chickens <= heads; chickens++) {
            const rabbits = heads - chickens;
            if (2 * chickens + 4 * rabbits === legs) {
                document.getElementById('result').textContent = `分别有鸡 ${chickens} 只，兔 ${rabbits} 只`;
                document.getElementById('result').className = 'solution';
                found = true;
                break;
            }
        }

        if (!found) {
            document.getElementById('result').textContent = '无解';
            document.getElementById('result').className = 'no-solution';
        }
    }
</script>

</body>
</html>
